<template>
	<view class="date">
		{{props.creatTime}}
	</view>
	<view class="post_container">	
		<view class="main_post">		
			<view class="post_img">
				
				<image :src="props.pictureUrl" mode="" style="height: 100%;width: 100%;border-radius: 20px;">
				</image>
				
			</view>

		</view>
		
		<view style="display: flex; margin-top: 15rpx; margin-left: 60rpx;">
			<image src="../../static/location.svg" style="width: 32rpx; height: 32rpx;"></image>
			<view style="font-size: 20rpx; color: #707070; margin-top: 8rpx; margin-left: 10rpx;">
				{{props.detailLocation}}
			</view>
		</view>

		
	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from "vue";
	// 从 vue 中引入defineProps
	import { defineProps } from 'vue'
	
	import addFrind from "@/components/addFriendButton/addFriendButton.vue"
	// 接收父组件传递过来的值
	const props = defineProps(['pictureUrl','detailLocation','creatTime'])
	const isLike = ref(false)
	const isShare = ref(false)
	const likeUrl = "../../static/like.svg"
	const likedUrl = "../../static/liked.svg"
	const shareUrl = "../../static/share.svg"
	const sharedUrl = "../../static/shared.svg"
	
	
	function clickLike() {
		isLike.value = !isLike.value
	}
	
	function clickShare() {
		isShare.value = !isShare.value
	}
</script>

<style>
	.post_container {
		width: 90%;
		margin: 20px auto;
		margin-top: 5px;
		border-radius: 20px;
		box-shadow: 0rpx 20rpx 20rpx rgba(90, 90, 90, 0.1);
		padding: 15rpx;
	}
	
	.name {
		margin-top: 19rpx;
		margin-left: 18rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.post_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.head {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
		overflow: hidden;
	}

	.user {
		display: flex;
	}
	
	.users {
		margin: 6rpx;
	}

	.main_post {
		padding: 0 20px;
	}

	.post_img {
		width: 100%;
		height: 200px;
		border-radius: 20px;
	}

	.icon {
		height: 50rpx;
		width: 50rpx;
	}

	.post_comment {
		display: flex;
	}
	
	.icons {
		position: relative;
		margin-top: 20rpx;
		left: 100rpx;
	}
	
	.date{
		padding-left: 30rpx;
		font-weight: 600;
	}
</style>